@charset "utf-8";
@import "common/common";
#web{
    overflow: hidden;
}
header{
    width: 100%;
    height: r(65);
    border-bottom: r(1) solid #a7a7a7;
    position: absolute;
    top: 0;
    left: 0;
    .header{
        width: 100%;
        height: 100%;
        p{
            width: 100%;
            font-size: r(30);
            color: rgba(0,0,0,.9);
            line-height: r(65);
           // text-align: center;
            span{
                width: 80%;
                text-indent: 30%;
                display:block;
                margin: 0 auto;
            }
        }
        a{
            display:block;
            height: r(65);
        }
        .wechat{
            height: r(65);
            a{
                float: left;
                margin-right: r(25);
            }
        }
        .left{
            margin-left: r(28);
            .iconfont,.iconfont:before{
                color: #1a1717;
            }
        }
        .iconfont,.iconfont:before{
            font-size: r(30);
            color: #a6a6a6;
            vertical-align: top;
            line-height: r(65);
        }
    }
}
section{
    width: 100%;
    position: absolute;
    top: r(66);
    bottom: r(62);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    aside{
        width: 100%;
        height: r(424);
        background: url(../img/acqierement/bgg.jpg) no-repeat;
        background-size:100%  ;
        overflow: hidden;
        position: relative;
        .user{
            width: r(180);
            height: r(180);
            border-radius:50% ;
            overflow: hidden;
            margin: r(44) auto 0;
            img{
                @include img();
            }
        }
        p{
            color: white;
            font-size: r(20);
            text-align: center;
            margin-bottom:r(8); 
            &:nth-of-type(1){
                span{
                    &:last-child{
                        color: #ff0000;
                    }
                }
            }
            &:nth-of-type(3){
                span{
                    display: block;
                    width: r(48);
                    height: r(24);
                    border: 1px solid #c5ccd5;
                    border-radius: 20%;
                    float: left;
                    margin-right:r(10); 
                    &:first-child{
                        margin-left: r(230);
                    }
                }
            }
        }
        .input{
            width: 100%;
            height: r(50);
            position: absolute;
            background: #8c8e91;
            bottom: 0;
            input{
                width: r(330);
                height: 100%;
                color:white;
                float: left;
                font-size: r(20);
                text-align:center;
                vertical-align:top;
                background:transparent;    
                &:last-child{
                    width: r(309);
                }
            }
            span{
                display: block;
                width: r(1);
                height: r(34);
                background: white;
                margin-top: r(7);
                float: left;
            }
        }
    }
    article{
        width: 100%;
        .info{
            width: 100%;
            height: r(82);
            border-bottom: r(1) solid #e5e5e5;
            .watch{
                margin-left: r(10);
                height: r(82);
                li{
                    float: left;
                    width: r(97);
                    height: 100%;
                    font-size: 0;
                    line-height: r(82);
                    .iconfont,.iconfont:before{
                        font-size: r(18);
                        color: rgba(0,0,0,.8);
                        vertical-align: top;
                        font-weight: bolder;
                    }
                    span{
                        font-size: r(18);
                        color: rgba(0,0,0,.8);
                        vertical-align: top;
                        padding-left: r(12);
                    }
                    input{
                        width: r(34);
                        height: r(22);
                        vertical-align: middle;
                    }
                }
            }
            .fans{
                height: r(82);
                span{
                    display: block;
                    float: left;
                    width: r(3);
                    height: r(34);
                    background: #cccccc;
                    margin-top: r(23);
                }
                li{
                    float: left;
                    width: r(102);
                    height: 100%;
                    text-align: center;
                    p{
                        &:first-child{
                            font-size: r(22);
                            color: rgba(0,0,0,.8);
                            line-height: r(24);
                            margin-top: r(21);
                        }
                        &:last-child{
                            font-size: r(18);
                            color: rgba(0,0,0,.5);
                        }
                    }
                }
            }
        }
        .label{
            width: 100%; 
            height: r(77);
            border-bottom: r(1) solid #e5e5e5;
            font-size: 0;
            .iconfont,.iconfont:before{
                font-size: r(24);
                color: rgba(0,0,0,.8);
                vertical-align: top;
                position: relative;
                top: r(14);
                padding-left: r(6);
            }
            span{
                display: inline-block;
                width: r(110);
                height: r(36);
                font-size: r(24);
                color: rgba(0,0,0,.7);
                border: 1px solid #bbbbbb;
                text-align: center;
                line-height: r(36);
                margin-left: r(15);
                margin-top: r(20);
                border-radius:10% ;
                &:nth-of-type(4),&:nth-of-type(5){
                    width: r(66);
                    height: r(36);
                }
            }
        }
        .navbar{
        width: 100%;
        height: r(97);
        border-bottom: 1px solid #7f7f7f;
        position: relative;
        li{
            float: left;
            width: 25%;
            height: r(96);
            line-height: r(96);
            text-align: center;
            border-bottom: 2px solid transparent;
            transition: all 200ms;
            &:nth-child(1){
                a{
                    img{
                       width: r(40);
                       height: r(30); 
                    }
                }
            }
             &:nth-child(2){
                a{
                    img{
                       width: r(28);
                       height: r(26); 
                    }
                }
            }
             &:nth-child(3){
                a{
                    img{
                       width: r(34);
                       height: r(30); 
                    }
                }
            }
             &:nth-child(4){
                a{
                    img{
                       width: r(28);
                       height: r(32); 
                    }
                }
            }
           a{
               @include img();
               display: block;
               overflow: hidden;
               img{
                   vertical-align: top;
                   display: block;
                   margin: 0 auto;
                   position: relative;
                   top: r(26);
               }
               font-size: r(16.64);
               color: rgba(0,0,0,.5);
               
           }
            &.active,&:hover{
                border-color:#333333;
                a{
                    color: #000;
                }
            }
        }
    }
    .video{
        width: 100%;
        li{
            float: left;
            width: r(212);
            height: r(212);
            margin-right: r(2);
            &:last-child{
                margin-right: 0;
            }
            img{
                @include img();
            }
        }
    }
    .audio{
        width: 100%;
        margin-top: r(20);
        li{
            float: left;
            width: r(212);
            height: r(212);
            margin-right: r(2);
            &:last-child{
                margin-right: 0;
            }
            div{
                width: r(212);
                height: r(150);
                img{
                    @include img();
                }
            }
            p{
                font-size: r(16);
                color: rgba(0,0,0,.8);
                text-align: center;
                margin-top: r(8);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
        .life{
        width: 100%;
        .life_title{
            width: 100%;
            height: r(40);
            background: #f2f2f2;
            font-size: r(20);
            color: rgba(0,0,0,.9);
            line-height: r(40);
           text-indent: r(28);
        }
        .userTrends{
            width: r(580);
            margin: 0 auto;
            li{
                border-bottom: 1px solid #ececec;
                &:last-child{
                    border-bottom: none;
                }
                .userImg{
                    width: r(50);
                    height: r(50);
                   // margin-left: r(34);
                    margin-top: r(20);
                    overflow: hidden;
                    border-radius: 50%;
                    img{
                        @include img();
                    }
                }
                .userSay{
                    p{
                        width: r(400);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin-left: r(24);
                    }
                    p:nth-child(1){
                        font-size: r(24);
                        color: #999999;
                         margin-top: r(16);
                    }
                    p:nth-child(2){
                        font-size: r(18);
                        color: #aaa9a9;
                        margin-bottom: r(18);
                    }
                }
                .userTime{
                    font-size: r(24);
                    color: rgba(0,0,0,0.5);
                     margin-top: r(18);
                    // margin-right: r(30);
                }
            }
            
        }
    }
    .anInfo{
        width: 100%;
        .life_title{
            width: 100%;
            height: r(40);
            background: #f2f2f2;
            font-size: r(26);
            color: rgba(0,0,0,.76);
            line-height: r(40);
            text-indent: r(28);
            margin-top: r(1);
            position: relative;
            img{
                width: r(26);
                height: r(26);
                position: absolute;
                right: r(30);
                top: r(8);
            }
        }
        .another{
            background: white;
            p{
                font-size: r(20);
                color: rgba(0,0,0,.9);
                margin-top: r(28);
                text-indent: r(28);
                &:last-child{
                    margin-bottom: r(30);
                }
            }
        }
        .myInfo{
            p{
                height: r(40);
                margin-top: r(28);
                &:last-child{
                    margin-bottom: r(28);
                }
            }
            label{
                font-size: r(20);
                color: rgba(0,0,0,.9);
                margin-top: r(28);
                padding-left: r(28);
                vertical-align: top;
                line-height: r(40);
            }
           input{
                vertical-align: top;
               float: right;
               width: r(500);
               height: r(40);
               border: none;
               font-size: r(20);
               color: rgba(0,0,0,.9);
           }
        }
         textarea{
                width: 100%;
                height: r(160);
                resize: none;
                border: none;
                text-indent: r(20);
                padding-top: r(120);
                font-size: r(20);
                color: rgba(0,0,0,.9);
            }
         .textarea{
              width: 100%;
               height: r(160);
               position: relative;
             input[type='file']{
                 width: r(97);
                 height: r(97);
                 background: red;
                 position: absolute;
                 top: r(12);
                 left: r(20);
                 opacity: 0;
                 z-index: 999;
             }
             img{
                width: r(97);
                height: r(97); 
                 position: absolute;
                 top: r(12);
                 left: r(20);
                 z-index: 1;
             }
         }   
    }
    }
    #myInfo,#acqiere,#life{
        display: none;
    }
}
